import React, { useEffect, useState } from "react";
import * as echarts from "echarts";


const HorizontalBar:React.FC<any>= ({HorizontalData}) => {
  let [HorizontalBar_chart,setHorizontalBar_chart] = useState<echarts.ECharts>();


  useEffect(()=>{
    // console.log(HorizontalData);
      },[HorizontalData])
      
  useEffect(() => {
    if (HorizontalBar_chart) {
      setHorizontalBar_chart(undefined)
  }
  HorizontalBar_chart = echarts.init(
    document.getElementById("HorizontalBar_chart") as HTMLElement
  );
    
    // 构建option配置对象
    const options = {
      // X轴展示数据
      xAxis: {
        show: false,
        type: "value",
        max: function (value: any) {
          return value.max * 1.2;
        },
      },
      // y轴展示数据
      yAxis: {
        type: "category",
        data: HorizontalData.regions.map((item: any) => {
          return item.name;
        }),
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#9EB1C8",
        },
      },
      // 图表绘制的位置，对应 上下左右
      grid: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        containLabel: true,
      },
      // 核心
      series: [
        {
          type: "bar",
          data: HorizontalData.regions.map((item: regionsType) => ({
            name: item.name,
            value: item.value,
          })),
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180,180,180,0.2)",
          },
          itemStyle: {
            color: "#479AD3",
            borderRadius: 5, // 修改：将 barBorderRadius 改为 borderRadius
            shadowColor: "rgba(0,0,0,0.3)",
            shadowBlur: 5,
          },
          barWidth: 12,
          label: {
            show: true,
            position: "right",
            color: "#fff", // 修改：将 textStyle 的 color 属性直接写在 label 对象内
          },
        },
      ],
    };

    HorizontalBar_chart.setOption(options);
  }, [HorizontalData]);

  return (
    <div className="w-full h-full">
      <div>【大区数据信息】</div>
      <div id="HorizontalBar_chart" className="w-full h-full"></div>
    </div>
  );
};
export default HorizontalBar;
